import React, { FC } from 'react';
import { listItem } from '../utils/Article';
import moment from 'moment';
import "../utils/font_1hsfvuvglv9/iconfont.css"
import "./ArticleItem.less"
import { useHistory } from 'umi';
import Thetime from "../store/modules/index"
interface Iitem {
  item: listItem;
}
const ArticleItem: FC<Iitem> = (props) => {
  let item = props.item;
  const history=useHistory()
  let allTimes = Thetime(item.publishAt as string | number);
  function goDetail(id:string){  
    history.push("/page/readDetail",id)
  }
  return (
    <div className="ArticleItem">
      <div className="top" onClick={()=>{goDetail(item.id)}}>
        <h2>{item.title}</h2>
        <span>{allTimes}</span>
      </div>
      <dl>
        <dt>
          <img src={item.cover} alt="图片已丢失" />
        </dt>
        <dd>
          <p>{item.summary}</p>
          <p>
            <span> <i className="iconfont icon-xin"></i> {item.likes}</span>
            <span> <i className="iconfont icon-kanguo"></i> {item.views}</span>
            <span> <i className="iconfont icon-fenxiang"></i> 分享</span>
          </p>
        </dd>
      </dl>
    </div>
  );
};

export default ArticleItem;
